/*<!-- 第一个柱状图的js -->*/
    $(function () {
        $('#container1').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: '垃圾投放量（kg）'
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                categories: [               //X轴的统计项
                    '浒井社区',
                    '孙厝社区',
                    '凤林美社区',
                    '叶厝社区',
                    '兑山社区',
                    '东安社区',
                    '乐海社区',
                    '滨水社区'
                ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: '垃圾重量(kg)'           //Y轴的计量单位
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f} kg</b></td></tr>',       //鼠标悬浮时显示的内容
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,                          //柱的宽度设置
                    borderWidth: 0
                }
            },
            series: [{
                name: '垃圾投放量',
                data: [42, 33, 34, 39, 52, 75, 57, 60]            //图表的数据

            }]
        });
    });
/*<!-- 第一个柱状图js结束 -->

<!-- 第二个饼状图js开始 -->*/
$(function () {
    $('#container2').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: '垃圾投放量（kg）'             //表头
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'        //鼠标悬浮时显示的百分比格式
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'     //鼠标悬浮时显示的百分比格式
                }
            }
        },

        series: [{
            type: 'pie',
            name: '投放量占比',                                                 //悬浮时候显示的提示内容
            data: [
                ['浒井社区',   45.0],                                           //图表的数据
                ['孙厝社区',       26.8],
                ['凤林美社区',       12.8],
                ['叶厝社区',    8.5],
                ['兑山社区',     6.2],
                ['东安社区',   11.7],
                ['乐海社区',   12.7],
                ['滨水社区',   15.7],
            ]
        }]
    });
});
/*<!-- 第二个饼状图js结束 -->*/

/*<!-- 第三个折线图js开始 -->*/
    $(function () {
        $('#container3').highcharts({
            title: {
                text: '垃圾投放量（kg）',        //表头
                x: -20 //center
            },
            subtitle: {
                text: '',
                x: -20
            },
            xAxis: {
                categories: ['浒井社区', '孙厝社区', '凤林美社区', '叶厝社区', '兑山社区', '东安社区','乐海社区', '滨水社区']                //X轴的统计项
            },
            yAxis: {
                title: {
                    text: '投放'           //Y轴的计量单位
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: 'kg'                //鼠标悬浮时候显示的数据的计量单位
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{
                name: '垃圾投放量',
                data: [12.1, 6.5, 65, 14, 33, 21, 25, 100]  //Y轴数据，从前到后依次为X轴的各个项目
            }]
        });
    });
